<template>
  <div class="mine-container">
    <van-nav-bar
        title="我的"
    />

    <div class="action">
      <div class="left">

        <van-image v-if="!isLogin" width="3.0rem" height="3.0rem" round src=""/>
        <van-image v-else width="3.0rem" height="3.0rem" round src="../../public/images/touxiang2.png"/>

        <div class="login_register" v-if="!isLogin" @click="goPage('login')">登录/注册</div>
        <div class="login_register" v-else @click="">{{ userInfo.studentName }} {{ userInfo.userName }}</div>
      </div>
    </div>

    <div class="my-feature">
      <ul>
        <li @click="goPage(item.key)" v-for="item in featureItems">
          <van-icon :name="item.icon" size="26"/>
          <span>{{ item.label }}</span>
        </li>
      </ul>
    </div>
    <!-- -------------------------------------------------------------------------------------------------------- -->
    <van-icon @click="goUserUpdata" class="setting" name="setting-o"/>
    <div class="setting-wrapper">
      <field-item class="item" label="账户信息设置" @click="goUserUpdata">
        <template #content>
          <span class="txt">学生个人资料等</span>
        </template>
      </field-item>

      <field-item label="支付设置" @click="click">
      </field-item>
      <field-item label="消息通知设置" @click="click">
      </field-item>
      <field-item label="隐私管理" @click="click"></field-item>
      <field-item label="通用" @click="click">
      </field-item>
      <field-item label="诊断工具" @click="click"></field-item>
      <field-item label="意见反馈" class="item" @click="click"></field-item>

      <field-item label="个人信息收集清单" @click="click"></field-item>
      <field-item label="第三方信息数据共享" @click="click"></field-item>
      <field-item label="关于学生选课系统" @click="click"></field-item>
      <field-item label="热线电话" class="item" @click="click">
        <template #content>
          <span class="txt">10107888</span>
        </template>
      </field-item>
      <van-button block style="border: none;" v-if="isLogin" @click="logout()">退出登录</van-button>
    </div>
    <!-- -------------------------------------------------------------------------------------------------------- -->
  </div>
</template>

<script setup>
  import {showFailToast} from 'vant';
  import FieldItem from '@/components/field-item.vue';
  import router from "@/router";
  import {onMounted, ref} from "vue";
  import axios from "axios";

  let userInfo = ref([]);
  let isLogin = ref();


  onMounted(() => {
    getInfo();
  })

  // 获取用户详细信息
  function getInfo() {

    axios.get('/getInfo', {
      headers: {
        'Authorization': 'Bearer ' + sessionStorage.token
      }
    }).then(res => {
      userInfo.value.userName = res.data.user.userName;
      userInfo.value.studentId = res.data.user.studentId;
      userInfo.value.studentName = res.data.student.name;
      isLogin.value = true;
    }).catch(error => {
      // 请求失败，弹出提示消息
      showFailToast('登录失效，请重新登录！');
      isLogin.value = false;

    });
  }

  const goPage = (name) => {
    // if (!isLogin.value) {
    //   showToast("抱歉，你还未登录")
    //   return
    // }
    router.push({name})
  }

  const goUserUpdata = () => {
    router.push({name: 'user_updata'})
  }


  // my-feature
  const featureItems = [
    {label: '朋友', key: 'comment', icon: 'friends'},
    {label: '邮件', key: 'collect', icon: 'invitation'},
    {label: '打印', key: 'course_select', icon: 'printer'},
    {label: '卡包', key: 'collect', icon: 'card'},
    {label: '更多', key: 'collect', icon: 'more'},
  ]

  function logout(){
    isLogin.value = false;
    sessionStorage.clear();
    goPage("login");
  }

</script>


<style lang="less" scoped>


.mine-container {
  background-color: #f2f5f8;
  position: relative;
  margin: 0;
  padding: 0;


  .top {
    height: 45px;
    line-height: 45px;
    background-color: #92adce;
    text-align: center;
    font-size: 14px;
  }


  .my-feature ul {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
  }

  .my-feature ul li .van-icon{
    color: #92adce;
  }

  .my-feature ul li {
    flex: 0 1 20%;
    text-align: center;
    margin: 20px 0;
    font-size: 12px;
  }

  .my-feature ul li span {
    display: block;
  }


  .action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;

    .left {
      display: flex;
      align-items: center;
      gap: 16px;

      .login_register {
        font-size: 20px;
      }
    }
  }

  .setting {
    position: absolute;
    font-size: 20px;
    top: 14px;
    right: 10px;
  }

  //--------------------------
  .setting-wrapper {
    min-height: 800px;
    padding-top: 12px;
    font-size: 12px;

    .item {
      margin-bottom: 12px;
    }

    .txt {
      font-size: 12px;
      color: #999;
    }

  }

  //--------------------------
}
</style>